<template>
  <template v-if="item.children && item.children.length > 0">
    <el-sub-menu :index="item.path">
      <template #title>
        <el-icon><component :is="item.icon"></component></el-icon>
        <span>{{ item.name }}</span>
      </template>
      <AdminMenuItem v-for="(child, index) in item.children" :key="index" :item="child" :level="level + 1" />
    </el-sub-menu>
  </template>
  <template v-else-if="level === 1 && menuStore.menuWidth !== '250px'">
    <el-menu-item :index="item.path">
      <el-tooltip :content="item.name" placement="right" offset="30">
        <el-icon><component :is="item.icon"></component></el-icon>
        <span>{{ item.name }}</span>
      </el-tooltip>
    </el-menu-item>
  </template>
  <template v-else>
    <el-menu-item :index="item.path">
      <el-icon><component :is="item.icon"></component></el-icon>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </template>
</template>

<script setup>
import { defineProps } from 'vue'
import { useMenuStore } from '@/stores/menu'
const menuStore = useMenuStore()

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  level: {
    type: Number,
    default: 1, // 默认层级为1，表示一级菜单
  },
})
</script>